<template>
	<view :style="{height:screenHeight+'px',backgroundColor:bgColor}">
		<view style="background-color: white;" >
			<u-cell-group :border="false">
				<u-cell
				title="备注和标签"
				isLink
				@click="show1 = true"
				></u-cell>
				<u-cell
				title="权限设置"
				isLink
				>
				</u-cell>
				<u-cell
				title="允许查看我的手机号"
				>
				<view slot="value">
					<u-switch v-model="value"></u-switch>
				</view>
				</u-cell>
			</u-cell-group>
		</view>
		<u-popup mode="center" round="10" :show="show1" @close="show1 = false" @open="show1 = true">
			<view style="padding: 5%;">
				 <u--input
				    placeholder="请输入内容"
				    border="bottom"
				    v-model="friend.userName"
				  ></u--input>
			</view>
			<view style="display: flex;">
				<button style="font-size: 28rpx;color: #0080FF;" @click="show1 = false">取消</button>
				<button style="font-size: 28rpx; color: #0080FF;" @click="updateNickName">确定</button>
			</view>
		</u-popup>
		<view style="margin-top: 2%; background-color: white;">
			<u-cell-group :border="false">
				<u-cell
				title="把他推荐给好友"
				isLink
				></u-cell>
			</u-cell-group>
		</view>
		<view style="margin-top: 2%; background-color: white;">
			<u-cell-group :border="false">
				<u-cell
				title="添加为外部联系人"
				isLink
				></u-cell>
			</u-cell-group>
		</view>
		<view style="margin-top: 2%; background-color: white;">
			<u-cell-group :border="false">
				<u-cell
				title="设置为特别关心"
				>
				<view slot="value">
					<u-switch v-model="value1"></u-switch>
				</view></u-cell>
			</u-cell-group>
		</view>
		<view style="padding-left: 2%;padding-right: 2%; font-size: 28rpx; color: #bfbfbf;">
			设置为特别关心后，可以增强对应的消息提醒，自定义提醒方式，避免错过重要消息。更多设置
		</view>
		<view style="margin-top: 2%; background-color: white;">
			<u-cell-group :border="false">
				<u-cell
				title="加入黑名单"
				>
				<view slot="value">
					<u-switch v-model="value2"></u-switch>
				</view></u-cell>
			</u-cell-group>
		</view>
		
		<button @click="show = true">解除好友关系</button>
		
		<u-popup mode="center" round="10" :show="show" @close="show = false" @open="show = true">
			<view class="prompt">
				<text>确定要解除好友关系?解除后会删除与对方的会话记录。</text>
			</view>
			<view class="bt">
				<button @click="show = false">取消</button>
				<button @click="deleteFriend">确定</button>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Toast:{
					type:'loading',
					title:'正在删除',
					message:'正在删除',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png',
					url: '',
				},
				friendName:'',
				show1:false,
				show:false,
				value:false,
				value1:false,
				value2:false,
				user:{},
				screenHeight:0,
				bgColor:'#f7f7f7',
				friend:{},
			}
		},
		methods: {
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.reLaunch({
							url: params.url
						})
					}
				})
			},
			updateNickName(){
				console.log(this.friend.id)
				console.log(this.friend.userName)
				uni.request({
					url:'http://localhost:8090/nailCampus/friend/updateNickName?fId='+this.friend.id+'&nickName='+this.friend.userName,
					method:'POST',
					header:{
						"token":uni.getStorageSync('token')
					},
					success:res=>{
						console.log(res.data)
						this.show1 = false
					}
				})
			},
			deleteFriend(){
				this.show = false
				this.showToast(this.Toast)
				uni.request({
					url:'http://localhost:8090/nailCampus/friend/removeFriend?fId='+this.friend.id,
					method:'POST',
					header:{
						"token":uni.getStorageSync('token')
					},
					success:res=> {
						this.Toast.url = '/pages/book/index'
						this.Toast.type = 'success'
						this.Toast.message = '删除成功'
						this.Toast.iconUrl = 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						this.showToast(this.Toast)
						console.log("删除成功")
					}
				})
			}
		},
		onLoad(options) {
			this.fid = Number(options.id)
			const systemInfo = uni.getSystemInfoSync()
			this.screenHeight = systemInfo.screenHeight-45
			uni.request({
				url:'http://localhost:8090/nailCampus/user/getUserById/'+this.fid,
				method:'GET',
				header:{
					"token":uni.getStorageSync('token')
				},
				success:res=>{
					this.friend = res.data.data
				}
			})
		}
	}
</script>

<style lang="less" scoped>
.cell-hover-class {
	background-color:white
}
button{
	margin-top: 3%;
	color: red;
	background-color: white;
}
button::after{
	border: none;
}
.prompt{
	padding: 5%;
	font-size: 28rpx;
}
.bt{
	display: flex;
	button{
		font-size: 28rpx;
		
	}
}
</style>
